<template>
    <table border="1">
        <tr>
            <td colspan="2" style="text-align:center;font-size:30px;">房型信息-添加</td>
        </tr>
        <tr>
            <td>房间名称</td>
            <td>
                <input type="text" v-model="Info.T_Name"/>
            </td>
        </tr>
        <tr>
            <td>门市价</td>
            <td>
                <input type="text" v-model="Info.T_Price"/>
            </td>
        </tr>
        <tr>
            <td>房型面积</td>
            <td>
                <input type="text" v-model="Info.T_Size"/>
            </td>
        </tr>
        <tr>
            <td>可住人数</td>
            <td>
                <input type="text" v-model="Info.T_Num"/>
            </td>
        </tr>
        <tr>
            <td>房型图片</td>
            <td>
                <img style="width:60px;height:60px;" :src="Info.T_Img"/>
                <input type="file" @change="uoload"/>
            </td>
        </tr>
        <tr>
            <td>房型介绍</td>
            <td>
                <textarea cols="20" rows="4" v-model="Info.T_Info"></textarea>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align:center;">
                <input type="button" value="添加" @click="addtype"/>
            </td>
        </tr>
    </table>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import axios from 'axios'
import {useRouter} from 'vue-router'

//创建路由的实例
const router=useRouter();

//创建响应式数据
const Info=ref({
    T_Id:0,
    T_Name:"",
    T_Price:null,
    T_Size:null,
    T_Num:null,
    T_Img:"",
    T_Info:""
})

//上传图片
const uoload=(e:any)=>{
    var file=e.target.files[0];
    var fd=new FormData();
    fd.append("Img",file);
    axios.post("https://localhost:7205/api/UpFile/UpLoad",fd)
    .then(res=>{
        if(res.data.File_Code==-1)
        {
            alert(res.data.File_Msg);
            return;
        }
        else if(res.data.File_Code==-2)
        {
            alert(res.data.File_Msg);
            return;
        }
        else{
            alert(res.data.File_Msg);
            Info.value.T_Img=res.data.File_Path;
        }
    })
}

//保存数据
const addtype=()=>{
    if(Info.value.T_Name=="")
    {
        alert("房型名称不能为空");
        return;
    }
    axios.post("https://localhost:7205/api/RoomType/AddRoomType",Info.value)
    .then(res=>{
        if(res.data>0)
        {
            alert("添加成功");
            router.push("/ShowRoomType");
        }
        else if(res.data==-1)
        {
            alert("当前房型已经存在");
            return;
        }
        else{
            alert("添加失败");
        }
    })
}
</script>